<template>
	<view class="home">
		<swiper class="swiper" circular autoplay>
			<swiper-item>
				<view class="bannerbox"></view>
			</swiper-item>
			<swiper-item>
				<view class="bannerbox"></view>
			</swiper-item>
			<swiper-item>
				<view class="bannerbox"></view>
			</swiper-item>
		</swiper>
		<view class="announcement">
			<view class="txt">限时特价：只有998元就可以升级为团长，快来火速加入</view>
		</view>
		<view class="qrcodebox">
			<navigator url="createQrcode/createQrcode">
				<view class="box">
					<image src="../../static/svg/wifi.svg" class="icon"></image>
					<div class="titlebox">
						<div class="title">创建WIFI码</div>
						<div class="subTitle">一键连接安全防蹭网</div>
					</div>
				</view>
			</navigator>
			<navigator url="manageQrcode/manageQrcode">
				<view class="box">
					<image src="../../static/svg/mywifi.svg" class="icon"></image>
					<div class="titlebox">
						<div class="title">我的WIFI码</div>
						<div class="subTitle">查看管理智能WIFI码</div>
					</div>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@import '../../static/style/mixin.scss';

	.home {
		width: 100vw;

		.swiper {
			height: 450upx;

			.bannerbox {
				width: 100vw;
				height: 450upx;
				background-image: linear-gradient(90deg, aqua, #f89);
			}
		}

		.announcement {
			width: inherit;
			height: 60upx;
			line-height: 60upx;
			font-size: 25upx;
			position: relative;
			overflow: hidden;
			animation: move 10s infinite linear;
		}

		@keyframes move {
			from {
				right: -750upx;
			}

			to {
				right: 750upx;
			}

		}

		.qrcodebox {
			padding-left: 20upx;
			display: flex;

			.box {
				box-sizing: border-box;
				padding: 15upx;
				width: 345upx;
				height: 130upx;
				margin-right: 20upx;
				border-radius: 10upx;
				background-image: linear-gradient(90deg, aqua, #f89);
				display: flex;
				align-items: center;

				.icon {
					width: 80upx;
					height: 80upx;
					margin-right: 15upx;
				}

				.titlebox {
					width: 220upx;

					.title {
						font-size: 35upx;
					}

					.subTitle {
						font-size: 20upx;
					}
				}
			}
		}
	}
</style>
